<template>
  <KView class="shop-cart-item">
    <KView class="shop-cart-item-header clearfix">
      <KView class="shop-cart-item-check">
        <sys-checkbox v-model="goodsData.checked" @change="checkChange"></sys-checkbox>
      </KView>
      <KView class="shop-cart-item-name" @click="shopClick">
        <KView class="shop-cart-item-name-icon">
          <img class="sys-img" :src="shopIcon" mode="aspectFit">
        </KView>
        <KView class="shop-cart-item-name-text ellipsis">{{cart.name}}</KView>
        <KView class="shop-cart-item-name-dropdown">
          <sys-svg name="arrowRight" color="#d4d4d4"></sys-svg>
        </KView>
      </KView>
      <KView class="shop-cart-item-buyMethod">
        <KView class="shop-cart-buyMethod-icon">
          <img class="sys-img" :src="buyMethodImgData[type]" mode="aspectFit">
        </KView>
        <KView :class="`buyMethod-${type}`" class="shop-cart-buyMethod-text">
          <span v-if="type===1">到店自取(距离{{cart.distanceText}})</span>
          <span v-else>配送到家</span>
        </KView>
      </KView>
    </KView>
    <KView class="shop-cart-item-line"></KView>

    <KView class="shop-cart-item-content">
      <goods-item v-for="goods in goodsList" :key="`goods_${goods.id}`" :goods="goods" @slide-open="slideOpen" @count-change="countChange"
        @delete-goods="deleteGoods" @item-click="itemClick"></goods-item>
    </KView>
  </KView>
</template>

<script>
  import SysCheckbox from 'common/sysCheckbox';
  import SysSvg from 'common/sysSvg';
  import GoodsItem from './goodsItem';

  import GlobalData from 'utils/globalData';
  import SystemUtil from 'utils/systemUtil';

  import ShoppingCartApi from 'services/shoppingCartApi';

  export default {
    props: {
      shopCart: {
        type: Object,
        required: true
      },
      cart: {
        type: Object,
        required: true
      },
      type: {
        type: Number,
        required: true
      }
    },

    computed: {
      goodsData() {
        let cart = this.cart;
        let goodsObj = cart.goodsObj;
        return goodsObj[this.type];
      },
      goodsList() {
        let goodsData = this.goodsData;
        return goodsData.data;
      }
    },

    data() {
      let imgData = GlobalData.images.shopCart;
      return {
        isMiniprogram: process.env.isMiniprogram,
        buyMethodImgData: imgData.buyMethodIcon,
        shopIcon: imgData.shopIcon
      };
    },

    methods: {
      slideOpen(goods) {
        let shopCart = this.shopCart;
        let cartList = shopCart.cartList;
        for (let i = 0; i < cartList.length; i++) {
          let cart = cartList[i];
          cart.changeGoodsShow(goods, false);
        }
      },

      checkChange() {
        this.cart.checkChange(this.type);
      },

      shopClick() {
        this.$emit('shop-click', this.cart, this.type);
      },

      countChange(goods) {
        SystemUtil.showLoading('');
        ShoppingCartApi.updateBuyCount(goods).then(msg => {
          goods.oldBuyCount = goods.buyCount;
          SystemUtil.hideLoading();
        }).catch(() => {
          goods.buyCount = goods.oldBuyCount;
          SystemUtil.hideLoading();
        });
      },

      deleteGoods(goods) {
        SystemUtil.showLoading('');
        ShoppingCartApi.deleteGoods(goods).then(msg => {
          this.shopCart.deleteGoods(goods);
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      itemClick(goods) {
        let defId = goods.defId;
        if (SystemUtil.isEmpty(defId)) {
          return;
        }

        if (this.isMiniprogram) {
          window.open(`/goodsDetail/${defId}`);
        } else {
          this.$router.push({
            path: `/goodsDetail/${defId}`
          });
        }
      }
    },

    components: {
      SysCheckbox,
      GoodsItem,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .shop-cart-item {
    padding-top: formatPx(40);
    padding-bottom: formatPx(70);
    box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);
    border-radius: formatPx(8);

    .shop-cart-item-header {
      height: formatPx(40);
      padding: 0 formatPx(20);
      margin-bottom: formatPx(35);
      display: flex;

      .shop-cart-item-check {
        width: formatPx(40);
      }

      .shop-cart-item-name {
        flex: 1;
        margin-left: formatPx(20);

        >div {
          float: left;
          height: 100%;
        }

        .shop-cart-item-name-icon {
          width: formatPx(30);
        }

        .shop-cart-item-name-text {
          margin-left: formatPx(10);
          max-width: calc(100% - #{formatPx(66)});
          line-height: formatPx(40);
          font-size: formatPx(26);
        }

        .shop-cart-item-name-dropdown {
          width: formatPx(26);
        }
      }

      .shop-cart-item-buyMethod {
        line-height: formatPx(40);
        display: flex;
        flex-wrap: nowrap;
        margin-left: formatPx(10);

        .shop-cart-buyMethod-icon {
          height: formatPx(40);
          width: formatPx(30);
        }

        .shop-cart-buyMethod-text {
          margin-left: formatPx(10);
          font-size: formatPx(22);

          &.buyMethod-1 {
            color: #ffa814;
          }

          &.buyMethod-2 {
            color: #59c264;
          }
        }
      }
    }

    .shop-cart-item-line {
      height: 1px;
      background: #DADADA;
    }

    .shop-cart-item-content {
      margin-top: formatPx(40);

      .shop-cart-goods-item {
        margin-bottom: formatPx(45);

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

</style>
